<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/blog/bs/css/bootstrap.css">
    <script src="/static/js/jquery-3.6.0.min.js"></script>

    <style>
        #avatar_img{
            margin-left: 20px;
        }
        #avatar{
            display: none;
        }
        .error{
            color: red;
        }
    </style>

</head>
<body>
<h3>注册</h3>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-offset-3">
            <form>
                {% csrf_token %}

                {% for filed in form %}
                    <div class="form-group">
                        <label for="{{ filed.auto_id }}">{{ filed.label}}</label>
                        {{ filed }} <span class="error pull-right"></span>
                    </div>
                {% endfor %}


                    <div class="form-group">
                        <label for="avatar">
                            头像
                            <img width="60" height="60" id="avatar_img" src="/static/blog/img/default.png" alt="">
                        </label>
                        <input type="file" id="avatar">
                    </div>


                <input type="button" class="btn btn-default reg_btn" value="注册"><span class="error"></span>
            </form>
        </div>
    </div>
</div>


<script>
    // 头像预览
    $("#avatar").change(function () {
        // 获取用户选中的文件对象
        var file_obj = $(this)[0].files[0];
        // 获取文件对象的路径
        var reader = new FileReader();
        reader.readAsDataURL(file_obj);
        reader.onload=function () {
            //修改img的src属性src=文件对象路径
            $("#avatar_img").attr("src",reader.result);
        };
    });

    // 基于Ajax提交表单事件
    $('.reg_btn').click(function () {
        var formdata=new FormData();
        formdata.append("user", $("#id_user").val());
        formdata.append("pwd", $("#id_pwd").val());
        formdata.append("re_pwd", $("#id_re_pwd").val());
        formdata.append("email", $("#id_email").val());
        formdata.append("avatar",$("#avatar")[0].files[0]);
        formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());

        $.ajax({
            url:"",
            type:"post",
            contentType:false,
            processData:false,
            data:formdata,
            success:function (data) {
                // console.log(data)
                if (data.user){
                    // 注册成功
                    location.href="/login/"
                }else{// 注册失败
                    // 清空错误信息
                    $("span.error").html("");
                    $(".form-group").removeClass("has-error");
                    // 展示此次提交的错误信息
                    $.each(data.msg, function (field,error_list) {
                        console.log(field, error_list);
                        if (field=="__all__"){
                            $("#id_re_pwd").next().html(error_list[0]).parent().addClass("has-error");
                        }
                        $("#id_" + field).next().html(error_list[0]);
                        $("#id_" + field).parent().addClass("has-error");
                    })
                }

            }
        });

    });

</script>
</body>
</html>